
/* ------------------------------------------------------------------------
クロスフェードスライドショー（画像リンク、テキスト表示機能つき）
	Copyright (c) 2009, Matsumoto.JS All rights reserved.

【使用方法】（なるべく<head>タグ内にて）
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/ss_crossfade.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container", loop:false, interval:5, duration:0.8};
	var slideObj = new Crossfade("imagelist.xml",option); 
});
</script>

【パラメータの説明】
第1パラメータはXMLの場所を指定します（JSON指定も可、サンプルを参照）
第2パラメータは以下の情報を任意に指定します（上記書式を参考に）
	imageId: スライドショーを表示するブロックのID
	textId: XML<description>テキストを表示する際のテキストブロックのID
		（指定しない、または空の場合はテキストを表示しません）
	loop: trueは繰返し再生します、falseは最後の画像で停止します
	autorun: ページ表示直後に自動再生させない場合はfalseを指定します
		trueの場合、next,prevSlide実行後も時間がくれば次を表示します
	interval: 画像表示時間を秒で指定（フェード中も含まれる）
	duration: フェードの時間を秒で指定（画像の切替え時間）
	paginate: テキスト表示時にページ番号を付ける（true/false）
	valign: 縦方向のセンタリング(初期値: false)
	halign: 横方向のセンタリング(初期値: true)
	※ valign,halignはimageId内のimgタグに属性またはCSSでwidth,heightがないこと。
  　（指定すると実サイズが取得できず位置調整ができないため）
	textout: テキスト表示時にアウト時のフェード（"fade"/"drop"/"shrink"/"puff"）
	linkTarget: ジャンプURLがある場合のターゲットウィンドウ（'_self','_blank'）

【XMLの説明】
<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item>
		<title>タイトルはイメージのaltに適用</title>
		<url>画像URL:相対パスの場合HTMLから/01.jpg</url>
		<link>画像クリックでジャンプさせる場合のURL</link>
		<description>説明文:HTMLタグはエスケープします</description>
	</item>
</items>
 ------------------------------------------------------------------------ */

var Crossfade = Class.create();
Crossfade.prototype = {

initialize: function(loc,option) {
	this.url = loc;
	this.props = {
		imageId : "image-container",
		textId : "",
		loop : true,
		autorun : true,
		interval : 4,
		duration : 1,
		paginate : false,
		valign : false,
		halign : true,
		textout : "fade",
		linkTarget : "_self"
	};
	if(option) for(var key in option) this.props[key] = option[key];

	this.myTimer = 0;
	this.idx = 0;
	this.itemCount = 0;
	this.imageUrls = new Array();
	this.linkArray = new Array();
	this.titlArray = new Array();
	this.descArray = new Array();
	this.baseDiv = $(this.props.imageId);

	if (this.url.items) this.loadJson();
	else this.loadXMLFile();
},
			
loadXMLFile: function () {
	new Ajax.Request(this.url, {
		method: "get", 
		onComplete: function (httpObj) { 
						this.displayData(httpObj); 
					}.bindAsEventListener(this)
		}
	);
},

displayData: function (httpObj) {
	var XML = httpObj.responseXML;
	var itemsTag = XML.getElementsByTagName("items");
	var items = itemsTag[0].getElementsByTagName("item");
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		var nd = items[i].getElementsByTagName("url")[0];
		this.imageUrls[i] = nd.firstChild.nodeValue;
		nd = items[i].getElementsByTagName("link")[0];
		if (nd) this.linkArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
		nd = items[i].getElementsByTagName("title")[0];
		if (nd) this.titlArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
		nd = items[i].getElementsByTagName("description")[0];
		if (nd) this.descArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
	}
	//prepare & preload
	this.prepareAndPlay();
},

loadJson: function () {
	var items = this.url.items;
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		var nd = items[i].url;
		this.imageUrls[i] = nd;
		nd = items[i].link;
		this.linkArray[i] = nd ? nd:'';
		nd = items[i].title;
		this.titlArray[i] = nd ? nd:'';
		nd = items[i].description;
		this.descArray[i] = nd ? nd:'';
	}
	this.prepareAndPlay();
},
	
startSlide: function () {
	if (!this.myTimer) 
		this.myTimer = setInterval(function(e) {
			this.effectSlide(1);
		}.bindAsEventListener(this), this.props.interval*1000);
},

stopSlide: function () {
	if (this.myTimer) {
		clearInterval(this.myTimer);
		this.myTimer = 0;
	}
},

nextSlide: function () {
	this.stopSlide();
	this.effectSlide(1);
	if (this.props.autorun) this.startSlide();
},

prevSlide: function () {
	this.stopSlide();
	this.effectSlide(-1);
	if (this.props.autorun) this.startSlide();
},

effectSlide: function (direction) {

	if (direction>0 && !this.props.loop && this.idx==this.itemCount-1) {
		this.stopSlide();
		return;
	}
	if (direction<0 && !this.props.loop && this.idx==0) {
		this.stopSlide();
		return;
	}

	this.fadeOut(this.idx);
	this.idx = this.idx + direction;
	if (direction > 0) {
		if (this.idx == this.itemCount) this.idx = 0;
	} else if (direction < 0) {
		if (this.idx < 0) this.idx = this.itemCount - 1;
	}
	this.fadeIn(this.idx);
},

fadeOut: function (lbl) {
	if (!$("slitem-"+lbl)) return;
	new Effect.Fade("slitem-"+lbl, { duration:this.props.duration, from:1.0, to:0.0 });
	if (this.props.textId) {
		if (this.props.textout=="fade")
			new Effect.Fade("sltext-"+lbl, { duration:this.props.duration, from:1.0, to:0.0 });
		else if (this.props.textout=="shrink")
			new Effect.Shrink("sltext-"+lbl, { duration:this.props.duration });
		else if (this.props.textout=="puff")
			new Effect.Puff("sltext-"+lbl, { duration:this.props.duration });
		else
			new Effect.DropOut("sltext-"+lbl, { duration:this.props.duration * 0.8 });
	}
},

fadeIn: function (lbl) {
	this.createSlide(lbl);
	new Effect.Appear("slitem-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
	if (this.props.textId) {
		new Effect.Appear("sltext-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
	}
},

prepareAndPlay: function () {
	this.baseDiv.setStyle({'position':'relative', 'overflow':'hidden'});
	//preload images
	for (var i=0; i < this.itemCount; i++) {	
		var img = new Image();
		if (i==this.itemCount-1) {
            Event.observe(img,'load',function() {
				this.fadeIn(this.idx);
				if (this.props.autorun) this.startSlide();
			}.bindAsEventListener(this,img));
		}
		img.src = this.imageUrls[i];
	}
},

createSlide: function (lbl) {
	if ($("slitem-"+lbl)) 
		this.baseDiv.removeChild($("slitem-"+lbl));
	var imgObj = new Element('img');
	var imgBox;
	
	if (this.titlArray[lbl]) imgObj.alt = this.titlArray[lbl];
	imgObj.setStyle({'border':'0'});
	imgObj.src = this.imageUrls[lbl];
	var pH = this.baseDiv.getHeight();
	var pW = this.baseDiv.getWidth();
	var iH = imgObj.height;
	var iW = imgObj.width;

	//Resize to fit
	if (iH <= iW && iW > pW) { //landscape
		var ratio = iH / iW;
		imgObj.width = pW;
		imgObj.height = pW * ratio;
	} else if (iH > iW && iH > pH) { //portrait
		var ratio = iW / iH;
		imgObj.height = pH;
		imgObj.width = pH * ratio;
	}
	var newH = imgObj.height;
	var newW = imgObj.width;

	if (this.linkArray[lbl]) {
		var lnkObj = new Element('a', {
			'id':'slitem-'+lbl, 'href':this.linkArray[lbl],
			'target':this.props.linkTarget
		});
		lnkObj.setStyle({'position':'absolute','left':'0','top':'0'});
		lnkObj.hide();
		lnkObj.appendChild(imgObj);
		this.baseDiv.insert(lnkObj);
		imgBox = lnkObj;
	} else {
		imgObj.id = "slitem-" + lbl;
		imgObj.setStyle({'position':'absolute','left':'0','top':'0'});
		imgObj.hide();
		this.baseDiv.insert(imgObj);
		imgBox = imgObj;
	}
	
	//Centering image
	if (newH > 0 && this.props.valign && newH < pH)
		imgBox.setStyle({"top":parseInt((pH-newH)/2)+"px"}); //landscape
	if (newW > 0 && this.props.halign && newW < pW)
		imgBox.setStyle({"left":parseInt((pW-newW)/2)+"px"}); //portrait

	if (this.props.textId) {
		var base_txt = $(this.props.textId);
		if ($("sltext-"+lbl))
			base_txt.removeChild($("sltext-"+lbl));
	
		var txtObj = new Element('span', {'id':'sltext-'+lbl});
		txtObj.setStyle({'position':'absolute', 'width':base_txt.getWidth()+'px'});
		txtObj.hide();
		var texts = this.descArray[lbl]?this.descArray[lbl]:'';
		if (this.props.paginate) texts = (lbl+1) + '/'+this.itemCount+':&nbsp;&nbsp;' + texts;
		txtObj.innerHTML = texts;
		base_txt.appendChild(txtObj);
	}
}

}//prototype